<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { useRouter } from 'vue-router';

const router = useRouter();

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'category',
      label: 'ID',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '日期',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '问卷类别',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '问卷标题',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { field: 'id', title: '问卷ID' },
    { field: 'title', title: '问卷标题' },
    { field: 'type', title: '问卷类别' },
    { field: 'time', title: '发布日期' },
    { field: 'deadline', title: '截至日期' },
    { field: 'status', title: '问卷状态' },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: '240',
    },
  ],
  height: 'auto',
  keepSource: false,
  pagerConfig: {},
  data: [
    {
      id: '1',
      title: '协会瑜伽体验课体验',
      type: '协会问卷',
      time: '10月21日', // 时间格式
      deadline: '10月28日',
      status: '已结束',
    },
    {
      id: '2',
      title: '工会秋季登山问卷',
      type: '工会问卷',
      time: '11月15日 ',
      deadline: '11月22日',
      status: '进行中',
    },
  ],
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });

function routerPush(name: string, id: number) {
  // 这里就是路由跳转，也可以用path
  router.push({ name: name, params: { id } });
}

function handleDelete(id: number) {
  Modal.confirm({
    title: '确认删除',
    content: '是否确认删除该问卷？',
    onOk() {
      console.log('ok');
    },
    onCancel() {
      console.log('cancel');
    },
  });
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #action="{ row }">
        <Button type="link" @click="routerPush('SurveyDetail', row.id)"
          >详情</Button
        >
        <!-- <Button type="link" @click="routerPush('SurveyEdit', row.id)"
          >编辑</Button
        > -->
        <Button type="link" @click="routerPush('SurveyResult', row.id)"
          >问卷结果</Button
        >

        <Button type="link" @click="handleDelete(row.id)">删除</Button>
      </template>

      <template #toolbar-tools>
        <Button
          class="mr-2"
          type="primary"
          @click="$router.push({ name: 'SurveyCreate' })"
          >新建</Button
        >
      </template>
    </Grid>
  </Page>
</template>
